<html xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui" >

    <ui:composition template="layout.xhtml">
        <ui:define name="corpo">
            <h:form>
                <div id="breadcrumb">
                    <p:commandLink  actionListener="#{managerIndex.redirect('index.xhtml')}" value="Inicio" update="@form" immediate="true"/> >
                    <p:commandLink  actionListener="#{managerIndex.redirect('indexImovel.xhtml')}" value="Imóvel" update="@form" immediate="true"/> >
                    <p:commandLink  value="Geolocalização" update="@form" immediate="true"/>
                </div>
            </h:form>

            <p:panel id="panelCriarImovel" header="Coordenadas Municípios">
                <p:focus for="panelCriarImovel"/>
                <h:form acceptcharset="utf-8" id="criarImovel" enctype="multipart/form-data"> 
                    <p:messages id="msg"/>
                    <fieldset class="ui-fieldset">
                        <legend><h:outputLabel value="Georeferenciamento"/></legend>

                        <h:panelGrid columns="2"  
                                     styleClass="textAlignRightBold">
                            <h:outputText value=" Cidade: " for="cidade"/>
                            <p:autoComplete id="cidadeEstado" value="#{managerStateCoord.cidade}" 
                                            completeMethod="#{managerEndereco.completeCidade}"   
                                            var="cidadeEstado"  required="true"
                                            requiredMessage="O campo cidade deve ser preenchido"
                                            itemLabel="#{cidadeEstado.nom_cidade} - #{cidadeEstado.cod_estado.nom_estado}" 
                                            itemValue="#{cidadeEstado}" converter="cidadeConverter" forceSelection="true" 
                                            converterMessage="Erro, verifique a cidade" minQueryLength="3" maxResults="10"
                                            dropdown="true" scrollHeight="200"> 
                                 <p:ajax event="itemSelect" listener="#{managerStateCoord.handleSelectCidade}" 
                                         update="msg, gridRef, :criarImovel:gmapConflict" /> 
                            </p:autoComplete>
                        </h:panelGrid>
                        <fieldset class="ui-fieldset">
                            <legend>
                                <h:outputLabel value="Coordenadas:  "/>  </legend>

                            <h:panelGrid columns="7" id="convertCoor" 
                                         styleClass="textAlignRightBold">

                                <h:outputLabel value="N" />
                                <p:inputText  value="#{managerStateCoord.convN}"  size="12"/>
                                <h:outputLabel value="E" />
                                <p:inputText  value="#{managerStateCoord.convE}"  size="12"/>
                                <h:outputLabel value="Zona" />
                                <p:row>
                                    <p:inputText  id="zona" value="#{managerStateCoord.convZona}"  size="5"/>
                                    <p:watermark for="zona" value="M" /> 
                                </p:row>

                                <p:commandButton icon="ui-icon-circle-plus" 
                                                 value="Adicionar"
                                                 actionListener="#{managerStateCoord.converterCoord()}"
                                                 action="#{managerStateCoord.initMap()}"
                                                 label="Adicionar"
                                                 title="Adicionar Coordenada"
                                                 update="msg, gridRef, @this, :criarImovel:gmapConflict"
                                                 style="width: 105px;"
                                                 process="convertCoor, @this" />

                            </h:panelGrid>
                            <br/>

                            <h:panelGrid  columns="1" id="gridRef" style="width: 100%;"
                                          styleClass="textAlignRight" columnClasses="alignTop, alignTop"  > 

                                <p:dataTable var="gf" id="coordList" value="#{managerStateCoord.lstGeoRef}" 
                                             style="width: 915px;" editable="true" emptyMessage="Nenhum registro encontrado" rowIndexVar="rowGf">  

                                    <p:ajax event="rowEdit" update=":criarImovel:gmapConflict"
                                            listener="#{managerStateCoord.initMap()}" /> 
                                    <f:facet name="header">  
                                        Coordenadas  
                                    </f:facet>  
                                    <p:column headerText="#" style="width:5%">  
                                        <h:outputText value="#{rowGf + 1}" />  
                                    </p:column>
                                    <p:column headerText="N" style="width:30%">  
                                        <p:cellEditor>  
                                            <f:facet name="output">  
                                                <h:outputText value="#{gf.convN}" />  
                                            </f:facet>  
                                            <f:facet name="input">  
                                                <p:inputText value="#{gf.convN}" style="width:100%"/>  
                                            </f:facet>  
                                        </p:cellEditor>  
                                    </p:column>  

                                    <p:column headerText="E" style="width:30%">  
                                        <p:cellEditor>  
                                            <f:facet name="output">  
                                                <h:outputText value="#{gf.convE}" />  
                                            </f:facet>  
                                            <f:facet name="input">  
                                                <p:inputText value="#{gf.convE}" style="width:100%" label="Year"/>  
                                            </f:facet>  
                                        </p:cellEditor>  
                                    </p:column>  

                                    <p:column headerText="Zona" style="width:20%">  
                                        <p:cellEditor>  
                                            <f:facet name="output">  
                                                <h:outputText value="#{gf.convZona}" />  
                                            </f:facet>  
                                            <f:facet name="input">  
                                                <p:inputText value="#{gf.convZona}" style="width:100%" label="Year"/>  
                                            </f:facet>  
                                        </p:cellEditor>  
                                    </p:column>  

                                    <p:column style="width:15%">  
                                        <p:rowEditor />  
                                        <p:commandButton icon="ui-icon-circle-close" 
                                                         actionListener="#{managerStateCoord.removeGeoRef(gf)}"
                                                         update=":criarImovel:gridRef, @this, coordList, :criarImovel:gmapConflict" 
                                                         process=":criarImovel:gridRef, @this"
                                                         label="Excluir Coordenadas"
                                                         title="Excluir Coordenadas"
                                                         style="width:15px; height: 15px;"/>
                                    </p:column>  

                                </p:dataTable>
                            </h:panelGrid>
                        </fieldset>
                    </fieldset>
                    <fieldset class="ui-fieldset">
                        <legend>
                            <h:outputLabel value="Mapa  "/>  </legend>

                        <p:gmap center="#{managerStateCoord.centerMap}" id="gmapConflict"
                                zoom="#{managerStateCoord.zoomMap}" type="HYBRID" 
                                style="width:100%;height:350px" model="#{managerStateCoord.polygonModel}">
                            <p:ajax event="stateChange" listener="#{managerStateCoord.onStateChange}" update="mapDialog" />  
                        </p:gmap>
                        
                        <p:commandButton type="button" icon="ui-icon-newwin"  
                                         onclick="dlg.show()" update="zoomMap" style="float:right;" />  

                        <p:dialog widgetVar="dlg" header="Georeferenciamento" id="mapDialog"  width="625" height="400" >  
                            <p:gmap id="zoomMap" center="#{managerStateCoord.centerMap}" 
                                    zoom="14" type="HYBRID" streetView="true"
                                    style="width:625;height:400px;"  model="#{managerStateCoord.polygonModel}">

                            </p:gmap>  
                        </p:dialog> 
                    </fieldset>
                        <div class="buttonAction">

                            <p:commandButton icon="ui-icon-plusthick" value="Atribuir" 
                                             actionListener="#{managerStateCoord.salvarCoord()}" 
                                             update="@form" process="@form"/>

                            <p:commandButton icon="ui-icon-close" value="Limpar" 
                                             actionListener="#{managerImovel.init()}" update="@form" />  

                            <p:ajaxStatus style="width:16px;height:16px;" id="ajaxStatusPanel">  
                                <f:facet name="start">  
                                    <h:graphicImage value="/media/img/loading.gif" />  
                                </f:facet>  

                                <f:facet name="complete">  
                                    <h:outputText value="" />  
                                </f:facet>  
                            </p:ajaxStatus>

                        </div>
                </h:form>
            </p:panel>
            <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
        </ui:define>
    </ui:composition>
</html>